<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE.set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <hr>
        <h1>学生姓名：{{student.name}}</h1>
        <h1 v-if="student.sex">性别：{{student.sex}}</h1>
        <h1>学生年龄：{{student.age}}</h1>
        <h1>学生朋友：</h1>
        <ul>
            <li v-for = 'f,index in student.friends' :key="index">
                {{f.name}}-{{f.age}}--{{f.sex}}
            </li>
        </ul>
        <button @click = "setInfo">添加属性</button>
    </div>
</body>
    <script type="text/javascript">
        
        const vm = new Vue({
            el:'#root',
            data:function(){
                return{
                    name:'南大',
                    address:'南京',
                    student:{
                        name:'tom',
                        age:18,                     
                        friends:[
                            {name:'jerry',age:35},
                            {name:'bob',age:56}
                        ]
                    }
                }
            },
            methods:{
              setInfo(){
                  Vue.set(this.student,'sex','男')
              }
          }
        })
    </script>
</html>